<template>
<div>
  <ul class="list">
    <li v-for="(item,index) in list" :key="index">
      <router-link :to="{path:'CourseDetail',query:{courseId:item.courseId}}">
        <img :src="item.coverFileUrl" alt="">
        <p>{{item.courseTitle}}</p>
        <p>共{{item.participationsCount}}节课 | {{item.orderBy}}人已报名</p>
        <p v-if="isFree">免费</p>
        <div v-else class="notFree">
          <span>￥{{item.discountPrice }}</span><span>￥{{item.coursePrice}}</span>
          <div>{{item.discountDesc}}</div>
        </div>
      </router-link></li>
  </ul>
</div>
</template>

<script>
// import axios from 'axios'
import {getCourse} from "@/api/api";

export default {
name: "todayList",
  data(){
  return{
    list:[],
    isFree:true
  }
  },
  props:['type','page-num','page-size'],
created() {
  getCourse(this.type,this.pageNum,this.pageSize).then(res=>{
    console.log(res)
    this.list = res.rows
  })
      if(this.type!='free'){
        this.isFree=false;
      }
}
}
</script>

<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
}
.list{
  list-style: none;
  overflow: hidden;
  padding: 20px 0;
  border-top: 8px solid #f5f5f5;
  li{
    width: calc(100%/5);
    height: 260px;
    float: left;
    padding: 5px 20px;
    text-align: center;
    box-sizing: border-box;
    font-size: 12px;
    color: #999;
    img{
      width: 100%;
      height: 155px;
    }
    p,div{
      text-align: left;
      height: 20px;
      line-height: 20px;

    }
    p{
      font-size: 16px;
      color: #777;
    }
    p:nth-child(2){
      color: black;
    }
    p:nth-child(4){
      color: #42b983;
    }
    .notFree {
      span:nth-child(1) {
        font-size: 16px;
        color: #ff1111;
      }
      span:nth-child(2) {
        font-size: 12px;
        color: #ccc;
        text-decoration: line-through;
      }
      div{
        display: inline-block;
        background-color: #ffe6eb;
        font-size: 12px;
        padding: 1px 6px;
        border: 1px solid orange;
        color: orange;
        float: right;
      }
    }
  }

}
</style>